<template>
  <div class="tagNavWrapper">
    <div class="navContent">
      <ul>
        <router-link to="/" tag="li" class="home" :class="{ active: isActive }">
          <span></span>
          <div class="title">首页</div>
        </router-link>
        <router-link
          :to="item.path"
          tag="li"
          v-for="(item, index) in navList"
          :key="index"
          :class="{ active: item.path === $route.path }"
        >
          <span></span>
          <div class="title">{{ item.meta.title }}</div>
          <i class="el-icon-close"></i>
        </router-link>
      </ul>
    </div>
    <el-dropdown @command="handleCommand">
      <div class="navMenu">
        <i class="el-icon-circle-close"></i>
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="closeAll">关闭所有</el-dropdown-item>
        <el-dropdown-item command="closeOthers">关闭其他</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navList: [],
      isActive: true,
    };
  },
  watch: {
    $route() {
      if (this.$route.path === "/dashboard") {
        this.isActive = true;
      } else {
        this.isActive = false;
      }
      this.getnavList();
    },
  },
  mounted() {
    if (this.$route.path === "/dashboard") {
      this.isActive = true;
    } else {
      this.isActive = false;
    }
    this.getnavList();
  },
  methods: {
    getnavList() {
      let currRoute = this.$route;
      if (currRoute.path === "/dashboard") return false;
      this.navList.push(currRoute);
      this.navList = this.unique("path");
    },
    unique(val) {
      const res = new Map();
      return this.navList.filter(
        (item) => !res.has(item[val]) && res.set(item[val], 1)
      );
    },
    handleCommand(command) {
      if (command === "closeAll") {
        this.navList = [];
        this.$router.push("/dashboard");
      } else {
        this.navList = [];
        this.navList.push(this.$route);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.tagNavWrapper {
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin: 5px 0;
  // padding: 0 40px 0 10px;
  padding-left: 10px;
  box-sizing: border-box;
  position: relative;
  .navContent {
    width: calc(100% - 30px);
    display: inline-block;
    ul {
      li {
        background-color: #eee;
        margin-right: 8px;
        display: inline-block;
        text-align: center;
        padding: 0 30px;
        position: relative;
        cursor: pointer;
        span {
          position: absolute;
          top: 12px;
          left: 17px;
          width: 16px;
          height: 16px;
          margin-right: 8px;
          border-radius: 50%;
          background-color: #fff;
        }
        .title {
          display: inline-block;
          padding: 0 20px;
        }
        i {
          position: absolute;
          top: 12px;
          right: 9px;
        }
        i:hover {
          color: red;
        }
      }
      li.home {
        padding-right: 0;
      }
      li.active {
        span {
          background-color: #00a19d;
        }
      }
    }
  }
  .navMenu {
    width: 30px;
    height: 40px;
    // position: absolute;
    // right: 0;
    // top: 0;
    padding: 0 6px;
    box-sizing: border-box;
    cursor: pointer;
    i {
      font-size: 18px;
    }
  }
  .navMenu:hover {
    background-color: rgba(238, 238, 238, 0.6);
  }
}
</style>